<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript coding standard</title>    
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/shCore.css" rel="stylesheet">
    <link href="css/shCoreEclipse.css" rel="stylesheet">	
</head>
<body>
	<nav id="tags"><div class="pin active">&nbsp;</div></nav> 
	<div id="wrapper"> 
		<h1>Javascript Coding Standard</h1>
		<section>
		    <h2>file</h2>
		    <ul>
                <li class="text">
                    JavaScript程序应该作为一个.js文件存储和发布
                </li>
                <li class="text">
                    &lt;script src="..."&gt;&lt;/script&gt;应该放在body元素的最后位置, 即 &lt;/body&gt; 的前面
                </li>
                <li class="text">
                    文件统一使用UTF-8编码
                </li>
                <li class="text">
                    使用 4 个空格 替换 1 个 Tab
                </li>
		        <li>
		            <div class="box">
                        <pre class="brush:css">
                            &lt;!DOCTYPE html&gt;
                            &lt;html lang="en"&gt;
                                &lt;head&gt;
                                    &lt;meta charset="utf-8"&gt;
                                    &lt;title&gt;your title&lt;/title&gt;
                                &lt;/head&gt;
                                &lt;body&gt;
                                
                                    &lt;script src="app.js"&gt;&lt;/script&gt;
                                &lt;/body&gt;
                            &lt;/html&gt;
                        </pre>
                    </div>
		        </li>
		    </ul>
		</section>
		<section>
			<h2>blank line</h2>
			<ul>                
                <li class="text">
                    每个函数(类)定义结束之后加上空行; 函数内逻辑上关系不密切的代码行之间加空行; 代码行上面的注释前加空行
                </li>
                 <li>
                    <div class="box">
                        <pre class="brush:js">
                            class DicomParser {
                                constructor(ww, wc) {                                    
                                    this.reader = new FileReader();
                                    
                                    // window width & window center
                                    this.ww = ww;
                                    this.wc = wc;
                                    
                                    // other init code
                                    ...                            
                                }
                            }
                            
                            class D {
                            
                            }
                        </pre>
                    </div>
                </li>                
            </ul>
        </section>
        <section>
			<h2>space &amp; alignment</h2>
			<ul>                
                <li class="text">
                    if/for/do/while/switch 等关键字后请保留一个空格<br>
                    左右括号与其中的表达式之间不加空格<br>
                    右括号与 { 中间保留一个空格
                </li>
                <li class="text">
                    请不要让 if/for/while/do 的执行体紧跟其后(应该另起一行)<br>
                    对于只有一行的执行体, 请勿省略 { }, 且 { 和 if/for/while/do 之间 不换行<br>
                    } 自占一行, 且与 if\for\while\do 等关键字对齐.
                </li>
                <li class="text">
                    表达式中的逗号(,)后保留一个空格, for 表达式中的分号(;)后保留一个空格(行末的分号;后请勿保留空格)
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            if (i &lt; len) {
                                console.log(i);
                            }
                            
                            for (let i = 0; i &lt; len; i++) {
                            
                            }
                            
                            while (list.next()) {
                                
                            }
                            
                            do {
                                
                            } while (i &lt; len);
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            if(i&lt;len) console.log(i);
                            
                            if(i&lt;len){
                                console.log(i);
                            }
                            
                            if(i&lt;len)
                                console.log(i);
                            
                            if (i &lt; len)
                            {
                                console.log(i);
                            }   
                            
                            if (i &lt; len)
                                {
                                console.log(i);
                                } 
                                 
                            if (i &lt; len){
                                console.log(i);
                                }
                                
                            do{
                                
                            }while(i &lt; len);
                        </pre>
                    </div>
                </li>        
                <li class="text">
                    三元操作符及大部分的二元操作符的 前后 分别保留一个空格<br>
                    ?: + - * / % = op= &lt; &gt; &lt;= &gt;= &amp;&amp; || &lt;&lt; ^ 等
                </li>
                <li class="text">
                    [] . 等二元操作符的前后不保留空格<br>
                    一元操作符 前台不加空格<br>
                    ! ~ ++ -- + -
                </li>                
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            return len > MAX ? "long" : "short";
                            
                            let result += 1 + 2 - 3 * 4 / 5 % 6;
                                                        
                            obj["p"]      = {};
                            obj["p"].lang = "js";
                            
                            if (a && b) {
                                if (!c) {
                                    ++d;
                                    e--;
                                    
                                }
                            }                            
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            return len&gt;MAX?"long":"short";
                            
                            let result+=1+2-3*4/5%6;
                                                        
                            obj ["p"]        = {};
                            obj ["p"] . lang = "js";
                            
                            if (a&amp;&amp;b) {
                                if (! c) {
                                    ++ d;
                                    e --;
                                }
                            }                                
                        </pre>
                    </div>
                </li>               
            </ul>
        </section>  
        <section>
            <h2>comment</h2>
            <ul>
                <li class="text">
                    代码中的注释 只能 出现在 某一个代码单元的 上面 或者 右侧 (勿在左侧和下面注释)
                </li>
                <li class="text">
                    注释是为了更好的理解代码<br>
                    注释应当准确, 易懂, 防止出现模棱两可的注释<br>
                    不要在注释中使用缩写<br>
                    及时更新注释, 保证其与被注释代码的一致性<br>
                    非不要不注释
                </li>
            </ul>
        </section>
        <section>
            <h2>declaration</h2>
            <ul>
                <li class="text">
                    "use strict"; 声明只应该出现在 函数的入口处, 而非文件的起始处
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            function foo() {
                                "use strict";
                                
                                ... 
                            }
                            
                            function bar() {
                                "use strict";
                                
                                ... 
                            }
                        </pre>
                    </div>  
                    <div class="box">
                        <pre class="brush:js">
                            "use strict";
                            
                            function foo() {                                
                                ... 
                            }
                            
                            function bar() {                                
                                ... 
                            }
                        </pre>
                    </div>                    
                </li>
                <li class="text">
                    使用一个语句定义多个变量, 每个变量单独一行(方便注释)
                </li>                
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let rows    = 512,
                                cols    = 512, 
                                canvas  = $("canvas").get(0),                  // html element canvas
                                ctx     = canvas.getContext("2d"),        
                                imgData = canvas.createImageData(rows, cols);  // chrome doesnot support new ImageData(r, c)
                        </pre>
                    </div>                    
                </li>
                <li class="text">
                    函数名和参数列表的左括号("(")之间不应该有空格<br>
                    右小括号和 { 之间保留一个空格<br>
                    方法体本身缩进4个空格<br>
                    } 和方法声明处对齐。 
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            function Person(name, age, job) {
                            
                            }
                        </pre>
                    </div> 
                    <div class="box">
                        <pre class="brush:js">
                            function Person(name,age,job){
                            
                            }
                            
                            function Person (name, age, job) {
                            
                            }
                            
                            function Person (name, age, job)
                                {

                                }
                        </pre>
                    </div>                   
                </li>
            </ul>
        </section>
        <section>
            <h2>statement</h2>
            <ul>
                <li class="text">
                    请不要省略语句末尾的分号(;)
                </li>
                <li class="text">
                    return 语句中被返回的内容, 不要加 ()
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            function fn() {
                                "use strict";
                                
                                ... 
                            }
                        </pre>
                    </div>  
                    <div class="box">
                        <pre class="brush:js">
                            "use strict";
                            
                            function fn() {
                                
                                ... 
                            }
                        </pre>
                    </div>                    
                </li>
                <li class="text">
                    使用一个语句定义多个变量, 每个变量单独一行(方便注释)
                </li>                
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let rows    = 512,
                                cols    = 512, 
                                canvas  = $("canvas").get(0),                  // html element canvas
                                ctx     = canvas.getContext("2d"),        
                                imgData = canvas.createImageData(rows, cols);  // chrome doesnot support new ImageData(r, c)
                        </pre>
                    </div>                    
                </li>
                <li class="text">
                    switch每个子句, 都需要break; 如果某子句需要 fall through, 请显示加上注释
                </li>                
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            // Duff's Device
                            
                            const T    = 8,
                                  REST = total % T;
                                
                            switch (REST) {
                                case 7:
                                    doSth();
                                    /* fall through */
                                case 6:
                                    doSth();
                                    /* fall through */
                                ...
                                case 2:
                                    doSth();
                                    /* fall through */
                                case 1:
                                    doSth();
                                    break;
                                default:
                                    break;
                            }
                        </pre>
                    </div>                    
                </li>
                <li class="text">
                    请使用 {} 和 [] 替代 new Object() 和 new Array()
                </li>
                <li class="text">
                    始终使用 === 和 !==, 可能的唯一的例外情况是 比较 null 和 undefined
                </li> 
                <li class="text">
                    不要在 "+" 后面紧跟 "+" 或者 "++", 在不得不的情况下, 请使用小括号
                </li> 
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let total = subtotal + (+input.value);
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            let total = subtotal++input.value;
                        </pre>
                    </div>
                </li>
            </ul>
        </section>  
        
        
        
    </div>

    <script src="js/jquery-2.1.3.min.js"></script> 
    <script src="js/shCore.js"></script>
    <script src="js/shBrushJScript.js"></script>
    <script src="js/shBrushCss.js"></script>
    <script src="js/shBrushPlain.js"></script>
	<script src="js/app.js"></script> 
</body>
</html>